<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>录书系统</title>
    <script src="js\Jquery3.1.1.js"></script>
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="layui/lay/modules/layer.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <style>

    </style>
</head>
<body style="background-color: #2C3E50">
<div style="position: absolute;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center">
    <div style="border: solid black 1px;padding: 10px;padding-right: 10%;padding-left: 10%;padding-bottom:0;background-color: white;height: 50%">
        <div id="bigMsg" style="width: 100%;font-size: 30px;text-align: center;margin-bottom: 40px;">准备录书</div>
        <form class="layui-form" action="" style="margin: 20px 0">
            <div class="layui-form-item">
                <label class="layui-form-label">RFID</label>
                <div class="layui-input-block">
                    <input id="rfid" type="text" name="title" required lay-verify="required" placeholder="请放书"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">条形码</label>
                <div class="layui-input-block">
                    <input id="code" type="text" name="title" required lay-verify="required" placeholder="请扫码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
        <div style="width: 100%;margin-top: 40px;display: flex;justify-content: space-between">
            <button id="btnStart" class="layui-btn layui-btn-disabled">开始</button>
            <button id="btnStop" class="layui-btn layui-btn-danger layui-btn-disabled">停止</button>
        </div>
    </div>
    <div style="position:absolute;bottom: 0;border-top: solid black 1px;width: 100%;background-color: white;padding: 40px 0"
         id="statusLine;">
        <div style="display: flex;justify-content: space-around;font-size: 20px">
            <div>本次录入数：<span id="thisCount"></span></div>
            <div>今天录入数：<span id="todayCount"></span></div>
            <div>总录入数：<span id="allCoutn"></span></div>
            <div>消息：<span id="message">准备录书</span></div>
            <div>连接状态：<span id="connectionStatus"></span></div>
        </div>
    </div>
</div>
<audio id="player1">
    <source src="http://zjlt.sc.chinaz.com/files/download/sound1/201403/4204.mp3"/>
</audio>
<audio id="player2">
    <source src="http://zjlt.sc.chinaz.com/Files/DownLoad/sound1/201611/8023.mp3"/>
</audio>
<script>
    $("#btnStart").click(function () {
        var index;
        $.ajax({
            url: 'startImportBook',

            beforeSend: function () {
                index = layer.load(2, {shade: false});
            },
            success: function (res) {
                if (res.code == 0) {
                    $("#btnStart").addClass("layui-btn-disabled");
                    $("#btnStop").removeClass("layui-btn-disabled");
                    layer.close(index);
                    $("#bigMsg").html("请放书");
                    $("#bigMsg").css("color", "red");
                    $("#thisCount").html("0");
                }
            },
            async: true
        });
    });


    $("#btnStop").click(function () {
        var index;
        $.ajax({
            url: 'CloseRfidReaderDervice',
            beforeSend: function () {
                index = layer.load(2, {shade: false});
            },
            success: function (res) {
                if (res.code == 0) {
                    $("#btnStop").addClass("layui-btn-disabled");
                    $("#btnStart").removeClass("layui-btn-disabled");
                    layer.close(index);
                    $("#code").val("");
                    $("#rfid").val("");
                    $("#bigMsg").html("准备录书");
                    $("#bigMsg").css("color", "#000");
                }
            },
            async: true
        });
    });
</script>
<script>
    var ip = "";
    var port = "";
    $.ajax({
        url: 'getIPandPort',
        async: false,
        success: function (res) {
            port = res.port;
            ip = res.ip;
        }
    });
    var ws = new WebSocket("ws://" + ip + ":" + port + "/sokect");
    ws.onopen = function () {
        console.log("连接成功")
        $("#connectionStatus").html("连接成功");
        $("#btnStart").removeClass("layui-btn-disabled");

    }
    ws.onmessage = function (evt) {
        var msg = JSON.parse(evt.data);
        console.log(msg);
        if (msg.from == "importBook") {
            $("#rfid").val(msg.sUid);
            $("#code").val("");
            $("#code").focus();
            $("#bigMsg").css("color", "#EE1289");
            $("#bigMsg").html("请扫码");
        }
    };
    ws.onclose = function () {
        console.log("连接已关闭...");
        $("#connectionStatus").html("断开连接");
        $("#bigMsg").html("断开连接");
        $(".layui-btn").addClass("layui-btn-disabled");
    };
</script>
<script>
    $("#code").keypress(function (e) {
        if (e.which == 13) {
            if ($("#rfid").val() != "" && $("#code").val() != "") {
                if ($("#code").val().length == 7) {
                    $.ajax({
                        url: 'insertRfidAndCode',
                        async: false,
                        data: {rfid: $("#rfid").val(), code: $("#code").val()},
                        success: function (res) {
                            console.log(res);
                            if (res.statusCode == -1) {
                                $("#message").css("color", "red");
                                var player = $("#player2")[0];
                                /*jquery对象转换成js对象*/
                                player.play();
                                /*播放*/
                                layer.alert(res.message);
                            }
                            if (res.statusCode == 0) {
                                $("#message").css("color", "#008B00");
                                var player = $("#player1")[0];
                                /*jquery对象转换成js对象*/
                                player.play();
                                /*播放*/
                            }
                            $("#rfid").val("");
                            $("#code").val("");
                            $("#bigMsg").html("请放书");
                            $("#bigMsg").css("color", "red");
                            $("#message").html(res.message);
                            $("#allCoutn").html(res.allCoutn);
                            $("#thisCount").html(res.thisCount);
                            $("#todayCount").html(res.todayCount);

                        }
                    });
                } else {
                    $("#message").css("color", "red");
                    $("#message").html("条形码格式错误！");
                    var player = $("#player2")[0];
                    /*jquery对象转换成js对象*/
                    player.play();
                    /*播放*/
                    layer.alert("条形码格式错误");
                }

            } else {
                $("#message").css("color", "red");
                $("#message").html("信息不能为空！");
                var player = $("#player2")[0];
                /*jquery对象转换成js对象*/
                player.play();
                /*播放*/
                layer.alert("信息不能为空！");
            }
        }
    });
</script>

<script>
    $.ajax({
        url: 'getCoutn',
        async: false,
        success: function (res) {
            $("#allCoutn").html(res.allCoutn);
            $("#thisCount").html(res.thisCount);
            $("#todayCount").html(res.todayCount);
        }
    });

</script>

</body>
</html>